<template>
     <div class="wrap">
           <dl v-for="item in topicArr" :key="item.id">
               <dt><img v-lazy="item.scene_pic_url"></dt>
               <dd>
                    <p>{{item.title}}</p>
                    <p>{{item.subtitle}}</p>
                    <p><span>{{item.price_info|priceStyle}}</span></p>
               </dd>
           </dl>

             <!-- 分页器 -->
             <van-pagination v-model="currentPage" :page-count="total" mode="simple" @change="changeFn" />
     </div>
</template>

<script>
import {getTopicDataApi} from "@/utils/https.js"
export default {
data(){return { page:1,size:4,topicArr:[],currentPage:1,total:1
                 
               }},
 created(){
        //默认调用一次
        this.getData()
 },
 methods:{ 
     
          //封装一下后端获取数据的代码
          getData(){
                       //从后端请求数据回来
                         getTopicDataApi({page:this.page,size:this.size}).then(
                              res=>{ console.log(res)
                                   //如果请求成功 
                                   if(res.errno==0){
                                        this.topicArr=res.data.data;
                                        //总页数
                                        this.total=res.data.totalPages
                                        //当前页
                                        this.currentPage=res.data.currentPage

                                   } 
                              }
                         )
               
          }, 
     
          //页码改变自动触发这个函数 val参数自动接受当前的页码
            changeFn(val){
                 this.page=val
                 this.getData()
            }
          }
}
</script>

<style lang="less" scoped>
.wrap{padding-bottom:200PX ;
      dl{width: 100%;
       font-size:16PX;
      img{width: 100%;}
      dd{
          p{line-height: 30PX;
            span{color: red;}
          }
         }
       }
}
   

</style>